<template>
  <div class="table-modul">
    <el-table size="mini" :data="tableData">
      <el-table-column type="selection" align="center" />

      <ex-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.children[0].label"
        :prop="item.children[0].prop"
        :fit-header="true"
        :auto-fit="true"
      >
        <template v-if="item.children.length > 1">
          <ex-table-column
            :auto-fit="true"
            :label="item.children[1].label"
            :prop="item.children[1].prop"
            :fit-header="true"
          >
            <template slot-scope="scope">
              <!-- <div>
                {{ scope.row[`${item.children[0].prop}`] }}
              </div>
              <div>
                {{ scope.row[`${item.children[1].prop}`] }}
              </div> -->
              <div
                v-for="c in item.children"
                :key="c.prop"
                :class="{ pointer: c.type === 'popup' }"
              >
                <template v-if="c.type === 'time'">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="scope.row[`${c.prop}`]"
                    placement="top"
                  >
                    <!-- {{ scope.row[`${c.prop}`].slice(5, 10) }} -->
                    <span>{{ scope.row[`${c.prop}`].slice(5, 10) }}</span>
                  </el-tooltip>
                </template>
                <template v-else-if="c.type === 'tag'">
                  <el-tag
                    size="mini"
                    :type="
                      scope.row[`${c.prop}`] === 'DDP' ? 'warning' : 'danger'
                    "
                    >{{ scope.row[`${c.prop}`] }}</el-tag
                  >
                </template>
                <template v-else>
                  {{ scope.row[`${c.prop}`] }}
                </template>
              </div>
            </template>
          </ex-table-column>
        </template>
      </ex-table-column>
      <el-table-column label="备注信息" width="120">
        <el-table-column label="其他信息" width="110">
          <template slot-scope="scope">
            <div class="flex align-center justify-between">
              <i class="fas fa-user pointer"></i>
              <el-popover
                placement="left-start"
                trigger="hover"
                @show="showTooltip(scope.row)"
              >
                <template>
                  <div class="text-orange text-sm margin-bottom-sm">
                    系统备注
                  </div>
                  <!-- <div
                    class="text-sm"
                    
                    v-for="(i, v) in scope.row.systemNotes"
                    :key="v"
                  >
                    {{ v }}: {{ i }}
                  </div> -->

                  <div
                    style="max-width:40vw"
                    class="text-sm"
                    v-html="scope.row.systemNotes"
                  ></div>
                </template>
                <div slot="reference">
                  <i class="fas fa-bullhorn pointer"></i>
                </div>
              </el-popover>
              <el-popover
                placement="left-start"
                trigger="hover"
                @show="showTooltip(scope.row)"
              >
                <template>
                  <el-card>
                    <div slot="header" class="clearfix">
                      <span class="title-icon">物流轨迹</span>
                    </div>
                    <el-table
                      class="table-box"
                      :border="true"
                      :data="scope.row.orderTrack"
                      style="width: 100%"
                      size="mini"
                    >
                      <el-table-column
                        min-width="140"
                        prop="trackTime"
                        label="时间"
                      >
                      </el-table-column>
                      <el-table-column
                        min-width="120"
                        prop="trackAddress"
                        label="地点"
                      >
                      </el-table-column>
                      <el-table-column prop="trackMan" label="操作人">
                      </el-table-column>
                      <el-table-column
                        min-width="340"
                        prop="track"
                        label="轨迹"
                      >
                      </el-table-column>
                    </el-table>
                    <el-link type="primary" class="margin-top-sm"
                      >查看更多>></el-link
                    >
                  </el-card>
                </template>
                <div slot="reference">
                  <i class="fas fa-truck pointer"></i>
                </div>
              </el-popover>
              <span class="text-red icon-border">提</span>
              <!-- <span class="text-green icon-border">送</span> -->
              <span class="text-green icon-border letter">TD</span>
            </div>

            <div>
              <span class="text-grey icon-border">起</span>
              <span class="text-grey icon-border">目</span>
              <span class="text-grey icon-border">报</span>
              <span class="text-grey icon-border">V</span>
              <span class="text-grey icon-border" title="放">放</span>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popover
            placement="left"
            trigger="hover"
            @show="showTooltip(scope.row)"
          >
            <template>
              <el-divider content-position="left">打印/导出</el-divider>

              <el-row :gutter="10">
                <el-col :span="12" class="menu-list">
                  <div>打印运单标签</div>
                  <div>打印面单标签</div>
                  <div>打印10X0运单</div>
                  <div>打印GreenBox面单</div>
                </el-col>
                <el-col :span="12" class="menu-list">
                  <div>导出追踪号</div>
                  <div>导出运单单票账单</div>
                  <div>导出起运港账单</div>
                  <div>导出目的港账单</div>
                  <div>导出已上传清关发票</div>
                </el-col>
              </el-row>
              <el-divider content-position="left">常规操作</el-divider>
              <el-row class="margin-top">
                <el-col :span="12" class="menu-list">
                  <div>编辑</div>
                  <div>备注</div>
                  <div>修改查验结果</div>
                  <div>运单详情</div>
                  <div>生成起运港账单</div>
                  <div>生成目的港账单</div>
                  <div>修改面单号</div>
                  <div>修改跟踪号</div>
                  <div>修改子单跟踪号</div>
                  <div>生成问题件</div>
                  <div>退货处理</div>
                  <div>恢复</div>
                  <div>编辑箱单</div>
                  <div>取消锁单</div>
                  <div>打回待确认</div>
                  <div>修改出库渠道</div>
                  <div>编辑入库单</div>
                  <div>锁定</div>
                  <div>解锁</div>
                  <div>审批通过</div>
                  <div>打回轨迹</div>
                  <div>修改海外操作</div>
                  <div>修改派送地址</div>
                  <div>修改仓库派送地址</div>
                </el-col>
                <el-col :span="12" class="menu-list">
                  <div>修改参考号</div>
                  <div>修改操作备注</div>
                  <div>修改H单信息</div>
                  <div>直接修改渠道</div>
                  <div>待出库打回待交寄</div>
                  <div>修改进口商是否认证</div>
                  <div>trackingMore轨迹追踪</div>
                  <div>推送订单至九方系统</div>
                  <div>推送入库数据</div>
                  <div>推送追踪号数据</div>
                  <div>校验FBA箱号</div>
                  <div>导入标签</div>
                  <div>查看箱单原始数据</div>
                  <div>清除运单追踪号信息</div>
                  <div>重新生成阿米巴渠道费用</div>
                  <div>更新对外销售结算人</div>
                  <div>更新ERP应付转阿米巴费用所属部门</div>
                  <div>分配GreenBox追踪号</div>
                  <div>重建索引</div>
                  <div>解冻运单(无问题件)</div>
                  <div>安排查验</div>
                  <div>待上网打回待出库</div>
                  <div>待报关打回待出库</div>
                  <div>待入库打回待交寄</div>
                  <div>修改入库时间</div>
                </el-col>
              </el-row>
            </template>
            <div slot="reference">
              <span class="text-blue">更多</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    pageName: {
      type: String,
      default: "airFreightList"
    },
    tableData: {
      type: Array,
      default: function(params) {
        return [];
      }
    },
    tableColumns: {
      type: Array,
      default: function(params) {
        return [];
      }
    }
  },
  mounted() {
    console.log(this.tableData);
  },
  methods: {
    showTooltip(data, index) {
      console.log(
        "%cdata: ",
        "color: MidnightBlue; background: Aquamarine;",
        data
      );
    }
  }
};
</script>

<style>
.table-modul .el-table th {
  padding: 0;
}
</style>
<style lang="scss" scoped>
.menu-list {
  min-width: 12vw;
  max-height: 90vh;
  overflow-y: auto;
  div {
    padding: 6px 8px;
    cursor: pointer;
    font-size: 12px;
    &:hover {
      background: #51abd1;
      color: #fff;
    }
  }
}
.letter {
  letter-spacing: -2px;
}
.icon-border {
  display: inline-block;
  border: 1px solid;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
}
</style>
